<template>
    <div class="Layout">
        <a-form :model="formState" name="normal_login" size="large" class="login-form Form" :label-col="{ span: 4 }"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
                <a-input v-model:value="formState.username">
                    <template #prefix>
                        <UserOutlined class="site-form-item-icon" />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                <a-input-password v-model:value="formState.password">
                    <template #prefix>
                        <LockOutlined class="site-form-item-icon" />
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item name="remember" :wrapperCol="{ offset: 4 }">
                <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
            </a-form-item>

            <a-form-item :wrapperCol="{ offset: 4 }">
                <a-button :disabled="disabled" block type="primary" html-type="submit" class="login-form-button">
                    登录
                </a-button>
            </a-form-item>
        </a-form>
    </div>

</template>
<script setup>
import { reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { SetToken } from '@/utils/auth';
const Router = useRouter();
const formState = reactive({
    username: import.meta.env.VITE_USERNAME,
    password: import.meta.env.VITE_PASSWORD,
    remember: true,
});


const LoginHistroy = localStorage.getItem('LoginHistroy');
try {
    const LoginData = JSON.parse(LoginHistroy);
    if (LoginData.remember) {
        formState.username = LoginData.username;
        formState.password = LoginData.password;
        formState.remember = LoginData.remember;
    }
} catch (error) {

}

import useHttp from "@/@base/use/useHttp";
const http = useHttp();

// onMounted(() => {
//     http.post('http://www.baidu.com', {}, {}).then(res => {
//         console.log(res);
//     });
// })


const onFinish = values => {
    localStorage.setItem('LoginHistroy', JSON.stringify({
        ...values
    }));

    Router.replace('/home');

    SetToken('Test');

    console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
    return !(formState.username && formState.password);
});
</script>
<style scoped lang="less">
.Form {
    width: 500px;
}

.Layout {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#components-form-demo-normal-login .login-form {
    max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
    float: right;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}
</style>